<template>

  <!-- 面包屑导航 -->
  <!--<el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>会员列表</el-breadcrumb-item>
  </el-breadcrumb>-->

  <el-card class="box-card">
    <el-row :gutter="20">

      <el-col :span="7">
        <el-input placeholder="请输入会员手机号"  class="input-with-select">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </el-col>

      <el-col :span="6" :offset="11" class="icon">
        <el-button type="primary" @click="" >导出</el-button>

        <el-button type="primary" @click="dialogVisible1=true" >新增</el-button>

        <!--新增模态框-->
        <el-dialog
          title="新增会员"
          :visible.sync="dialogVisible1"
          width="80"
          class="for"
          style="text-align: center">

          <!--修改表单-->
          <el-form ref="form" :model="desc" label-width="100px" >

            <el-form-item label="会员编码:" prop="d_cardNumber">
              <el-input v-model="desc.d_cardNumber"></el-input>
            </el-form-item>

            <el-form-item label="会员名称:" prop="d_memberName">
              <el-input v-model="desc.d_memberName"></el-input>
            </el-form-item>

            <el-form-item label="手机号码:" prop="d_memberPhone">
              <el-input v-model="desc.d_memberPhone"></el-input>
            </el-form-item>

            <el-form-item label="会员等级:" prop="d_memberType"  >
              <el-select v-model="desc.d_memberType" style="width: 100%;" >
                <el-option
                  v-for="item in level.d_levelTypes"
                  :key="item.id"
                  :label="item.levelType"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="发卡门店:" prop="d_store">
              <el-input v-model="desc.d_store"></el-input>
            </el-form-item>

            <el-form-item label="性别:" prop="d_gender">
              <el-radio-group v-model="desc.d_gender" style="text-align: center" >
                <el-radio label="男"></el-radio>
                <el-radio label="女"></el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="生日:" prop="d_birthday">
              <el-date-picker type="date" placeholder="选择日期" v-model="desc.d_birthday" style="width: 100%;"></el-date-picker>
            </el-form-item>

            <el-form-item label="邮箱:" prop="d_mail">
              <el-input v-model="desc.d_mail"></el-input>
            </el-form-item>

            <el-form-item label="经验值:" prop="d_exp">
              <el-input v-model="desc.d_exp"></el-input>
            </el-form-item>

            <el-form-item label="可用积分:" prop="d_integral">
              <el-input v-model="desc.d_integral"></el-input>
            </el-form-item>

            <el-form-item label="储值账户余额:" prop="d_balance">
              <el-input v-model="desc.d_balance"></el-input>
            </el-form-item>

            <el-form-item label="累计消费余额:" prop="d_monetary">
              <el-input v-model="desc.d_monetary"></el-input>
            </el-form-item>

            <el-form-item label="累计消费次数:" prop="d_consumptionCount">
              <el-input v-model="desc.d_consumptionCount"></el-input>
            </el-form-item>

            <el-form-item label="最后消费日期:" prop="d_consumptionDate">
              <el-date-picker type="date" placeholder="选择日期" v-model="desc.d_consumptionDate" style="width: 100%;"></el-date-picker>
            </el-form-item>

            <el-form-item label="注册来源:" prop="d_registeredSource">
              <el-input v-model="desc.d_registeredSource"></el-input>
            </el-form-item>

            <el-form-item label="注册邀请码:" prop="d_registeredCode">
              <el-input v-model="desc.d_registeredCode"></el-input>
            </el-form-item>

            <el-form-item label="注册时间:" prop="d_createTime">
              <el-date-picker type="date" placeholder="选择日期" v-model="desc.d_createTime" style="width: 100%;"></el-date-picker>
            </el-form-item>

            <el-form-item label="个人邀请码:" prop="d_personalCode">
              <el-input v-model="desc.d_personalCode"></el-input>
            </el-form-item>

          </el-form>

          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible1 = false">取 消</el-button>
            <el-button type="primary" @click="onSubmit1">保存</el-button>
          </span>
        </el-dialog>

      </el-col>

    </el-row>

    <!--会员列表-->
    <el-row>
      <el-col :span="24">
        <el-table :data="tableData" stripe style="width: 100%" :cell-style="{ textAlign: 'center' }">
          <el-table-column prop="cardNumber" label="会员卡号"  header-align="center"></el-table-column>
          <el-table-column prop="store" label="发卡门店" header-align="center"></el-table-column>
          <el-table-column prop="memberPhone" label="手机号码" header-align="center"></el-table-column>
          <el-table-column prop="integral" label="可用积分" header-align="center"></el-table-column>
          <el-table-column prop="balance" label="储值账户余额" header-align="center"></el-table-column>
          <el-table-column prop="monetary" label="累计消费金额" header-align="center"></el-table-column>
          <el-table-column prop="consumptionCount" label="累计消费次数" header-align="center"></el-table-column>
          <el-table-column prop="consumptionDate" label="最后消费日期" header-align="center"></el-table-column>
          <el-table-column header-align="center">

            <!--表头-->
            <template slot="header" slot-scope="scope">
              <i class="el-icon-more"></i>
            </template>

            <!--列表内容-->
            <template slot-scope="scope">
              <el-dropdown @command="handleCommand($event,scope.row)" placement="bottom">
              <span class="el-dropdown-link">
                <i  slot="reference" class="el-icon-more-outline"></i>
              </span>
                <el-dropdown-menu slot="dropdown" style="text-align: center" >
                  <el-dropdown-item command="a">详情</el-dropdown-item>

                  <el-dropdown-item command="b">启用/禁用</el-dropdown-item>

                  <el-dropdown-item command="c">设置登录密码</el-dropdown-item>

                  <el-dropdown-item command="d">设置支付密码</el-dropdown-item>

                </el-dropdown-menu>
              </el-dropdown>

            </template>

          </el-table-column>
        </el-table>



      </el-col>
    </el-row>

    <!--分页-->
    <el-row>
      <el-col :span="24">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400">
        </el-pagination>
      </el-col>
    </el-row>

    <!--详情模态框-->
    <el-dialog
      title="会员详情"
      :visible.sync="dialogVisible2"
      width="80"
      class="for">

      <el-row :gutter="20" class="el_row">
        <el-col :span="8" class="tit">会员卡号：</el-col>
        <el-col :span="16" class="con">{{desc.d_cardNumber}}</el-col>
      </el-row>

      <el-row :gutter="20" class="el_row">
        <el-col :span="8" class="tit">会员姓名：</el-col>
        <el-col :span="16" class="con">{{desc.d_memberName}}</el-col>
      </el-row>

      <el-row :gutter="20" class="el_row">
        <el-col :span="8" class="tit">手机号码：</el-col>
        <el-col :span="16" class="con">{{desc.d_memberPhone}}</el-col>
      </el-row>

      <el-row :gutter="20" class="el_row">
        <el-col :span="8" class="tit">会员等级：</el-col>
        <el-col :span="16" class="con">{{desc.d_memberType}}</el-col>
      </el-row>

      <el-row :gutter="20" class="el_row">
        <el-col :span="8" class="tit">发卡门店：</el-col>
        <el-col :span="16" class="con">{{desc.d_store}}</el-col>
      </el-row>

      <el-row :gutter="20" class="el_row">
        <el-col :span="8" class="tit">性别：</el-col>
        <el-col :span="16" class="con">{{desc.d_gender}}</el-col>
      </el-row>

      <el-row :gutter="20" class="el_row">
        <el-col :span="8" class="tit">生日：</el-col>
        <el-col :span="16" class="con">{{desc.d_birthday}}</el-col>
      </el-row>

      <el-row :gutter="20" class="el_row">
        <el-col :span="8" class="tit">邮箱：</el-col>
        <el-col :span="16" class="con">{{desc.d_mail}}</el-col>
      </el-row>

      <el-row :gutter="20" class="el_row">
        <el-col :span="8" class="tit">经验值：</el-col>
        <el-col :span="16" class="con">{{desc.d_exp}}</el-col>
      </el-row>

      <el-row :gutter="20" class="el_row">
        <el-col :span="8" class="tit">可用积分：</el-col>
        <el-col :span="16" class="con">{{desc.d_integral}}</el-col>
      </el-row>

      <el-row :gutter="20" class="el_row">
        <el-col :span="8" class="tit">储值账户余额：</el-col>
        <el-col :span="16" class="con">{{desc.d_balance}}</el-col>
      </el-row>

      <el-row :gutter="20" class="el_row">
        <el-col :span="8" class="tit">累计消费金额：</el-col>
        <el-col :span="16" class="con">{{desc.d_monetary}}</el-col>
      </el-row>

      <el-row :gutter="20" class="el_row">
        <el-col :span="8" class="tit">累计消费次数：</el-col>
        <el-col :span="16" class="con">{{desc.d_consumptionCount}}</el-col>
      </el-row>

      <el-row :gutter="20" class="el_row">
        <el-col :span="8" class="tit">最后消费日期：</el-col>
        <el-col :span="16" class="con">{{desc.d_consumptionDate}}</el-col>
      </el-row>

      <el-row :gutter="20" class="el_row">
        <el-col :span="8" class="tit">注册来源：</el-col>
        <el-col :span="16" class="con">{{desc.d_registeredSource}}</el-col>
      </el-row>

      <el-row :gutter="20" class="el_row">
        <el-col :span="8" class="tit">注册邀请码：</el-col>
        <el-col :span="16" class="con">{{desc.d_registeredCode}}</el-col>
      </el-row>

      <el-row :gutter="20" class="el_row">
        <el-col :span="8" class="tit">注册时间：</el-col>
        <el-col :span="16" class="con">{{desc.d_createTime}}</el-col>
      </el-row>

      <el-row :gutter="20"class="el_row">
        <el-col :span="8" class="tit">个人邀请码：</el-col>
        <el-col :span="16" class="con">{{desc.d_personalCode}}</el-col>
      </el-row>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
      </span>
    </el-dialog>

    <!--是否禁用模态框-->
    <el-dialog
      title="操作提示"
      :visible.sync="dialogVisible3"
      width="80"
      class="for">

      <el-row>
        <el-col :span="24">是否禁用！</el-col>
      </el-row>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible3 = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit2">确认</el-button>
      </span>

    </el-dialog>

    <!--修改密码模态框-->
    <el-dialog
      title="设置登录密码"
      :visible.sync="dialogVisible4"
      width="80"
      class="for"
      style="text-align: center">

      <el-form ref="form" :model="login_pwd" label-width="100px" >

        <el-form-item label="登录密码:" prop="newPassword">
          <el-input v-model="login_pwd.newPassword"></el-input>
        </el-form-item>

        <el-form-item label="确认密码:" prop="secPassword">
          <el-input v-model="login_pwd.secPassword"></el-input>
        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible4 = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit3">确认</el-button>
      </span>

    </el-dialog>

    <el-dialog
      title="设置支付密码"
      :visible.sync="dialogVisible5"
      width="80"
      class="for"
      style="text-align: center">

      <el-form ref="form" :model="pay_pwd" label-width="100px" >

        <el-form-item label="支付密码:" prop="newPassword">
          <el-input v-model="pay_pwd.newPassword"></el-input>
        </el-form-item>

        <el-form-item label="确认密码:" prop="secPassword">
          <el-input v-model="pay_pwd.secPassword"></el-input>
        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible5 = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit4">确认</el-button>
      </span>

    </el-dialog>




  </el-card>
    
</template>

<script>
    export default {
      name: "MemberList",
      data(){
        return{
          tableData:[{
            id: 1,
            cardNumber: "111",
            memberName: "",
            store: "",
            memberPhone: "",
            memberType: "",
            gender: "",
            birthday: "",
            mail: "",
            exp: "",
            integral: "",//可用积分
            balance: "",//储值账户余额
            monetary: "",//累计消费金额
            consumptionCount: "",//累计消费次数
            consumptionDate: "",//最后消费日期
            registeredSource: "",
            registeredCode: "",
            createTime: "",
            personalCode: "",
            loginPassword: "",
            payPassword: "",
            delStatus: 0,
          }],
          desc:{
            d_id: 0,
            d_cardNumber: "",
            d_memberName: "",
            d_memberPhone: "",
            d_memberType: "",
            d_store: "",
            d_gender: "",
            d_birthday: "",
            d_mail: "",
            d_exp: "",
            d_integral: "",
            d_balance: "",
            d_monetary: "",
            d_consumptionCount: "",
            d_consumptionDate: "",
            d_registeredSource: "",
            d_registeredCode: "",
            d_createTime: "",
            d_personalCode: "",
            d_loginPassword: "",
            d_payPassword: "",
            d_delStatus: 0,
          },
          level:{
            d_id: 0,
            d_levelType: "",
            d_levelTypes: []
          },
          login_pwd:{
            newPassword: "",
            secPassword: ""
          },
          pay_pwd:{
            newPassword: "",
            secPassword: ""
          },
          currentPage1: 5,
          currentPage2: 5,
          currentPage3: 5,
          currentPage4: 4,
          dialogVisible1: false,
          dialogVisible2: false,
          dialogVisible3: false,
          dialogVisible4: false,
          dialogVisible5: false
        }
      },
      methods:{
        handleSizeChange(val) {
          console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
          console.log(`当前页: ${val}`);
        },
        /*会员详情设置*/
        handleCommand(command,row) {
          /*this.$message('click on item ' + command);*/
          console.log(row);

          switch (command) {
            case "a":
              this.dialogVisible2=true;
              //赋值
              this.desc.d_cardNumber = row.cardNumber;
              this.desc.d_memberName = row.memberName;
              this.desc.d_memberPhone = row.memberPhone;
              this.desc.d_memberType = row.memberType;
              this.desc.d_store = row.store;
              this.desc.d_gender = row.gender;
              this.desc.d_birthday = row.birthday;
              this.desc.d_mail = row.mail;
              this.desc.d_integral = row.integral ;
              this.desc.d_balance = row.balance;
              this.desc.d_monetary = row.monetary;
              this.desc.d_consumptionCount = row.consumptionCount;
              this.desc.d_consumptionDate = row.consumptionDate;
              this.desc.d_registeredSource = row.registeredSource;
              this.desc.d_registeredCode = row.registeredCode;
              this.desc.d_createTime = row.createTime ;
              this.desc.d_personalCode = row.personalCode;
              return;

            case "b":
              this.dialogVisible3=true;
              this.desc.d_delStatus = row.delStatus;
              return;

            case "c":
              this.dialogVisible4=true;
              row.loginPassword = this.login_pwd.secPassword;
              return;

            case "d":
              this.dialogVisible5=true;
              row.loginPassword = this.pay_pwd.secPassword;
              return;
          }
        },
        onSubmit1() {
          //关闭模态框
          this.dialogVisible1 = false;
          console.log('submit1!');
          //提交新增会员

        },
        onSubmit2() {
          //关闭模态框
          this.dialogVisible3 = false;
          console.log('submit1!');
          //提交新增会员

          this.$message({
            message:"修改成功!",
            type:"success"
          });
        },
        onSubmit3() {
          //关闭模态框
          this.dialogVisible4 = false;
          console.log('submit1!');
          //提交新增会员

          this.$message({
            message:"修改成功!",
            type:"success"
          });
        },
        onSubmit4() {
          //关闭模态框
          this.dialogVisible5 = false;
          console.log('submit1!');
          //提交新增会员

          this.$message({
            message:"修改成功!",
            type:"success"
          });
        },

      }
    }
</script>

<style scoped>
  .icon{
    text-align: right;
  }

  .tit{
    text-align: right;
  }

  .con{
    text-align: left;
  }

  .el_row {
    margin-bottom: 20px;
  }

</style>
